<!DOCTYPE html>
<html lang="zh-CN">

<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>zan-admin后台管理系统模板</title>
    <link rel="icon" href="favicon.ico" type="image/ico">
    <script src="static/js/checkie&edge.js"></script>
    <link href="static/css/bootstrap.min.css" rel="stylesheet">
    <link href="static/css/zan-admin.min.css" rel="stylesheet">
    <!-- 插件依赖 -->
    <link href="lib/bootstrap-notify/animate.min.css" rel="stylesheet">
</head>

<body>
    <header class="zan-header">
        <span class="glyphicon glyphicon-menu-hamburger zan-sidebar-toggle" aria-hidden="true"></span>
        <div class="zan-header-center">
            <div class="zan-nav-item"><a href="index.html">首页</a></div>
            <div class="zan-nav-item"><a href="platform.html">平台</a></div>
            <div class="zan-nav-item"><a href="#">商城</a></div>
            <div class="zan-nav-item"><a href="#">运营</a></div>
        </div>
        <div class="zan-avatar-wrap">
            <div class="dropdown">
                <img class="zan-avatar" data-toggle="dropdown" src="static/images/avatar.jpg" alt="头像">
                <ul class="dropdown-menu dropdown-menu-right">
                    <li><a href="#">admin</a></li>
                    <li role="separator" class="divider"></li>
                    <li><a href="#">超级管理员</a></li>
                    <li role="separator" class="divider"></li>
                    <li><a href="#">通知 <span class="badge">10</span></a></li>
                    <li><a href="#">个人资料</a></li>
                    <li><a href="page_password.html">修改密码</a></li>
                    <li><a href="#">清空缓存</a></li>
                    <li role="separator" class="divider"></li>
                    <li><a href="page_login.html">退出登录</a></li>
                </ul>
            </div>
        </div>
    </header>
    <aside class="zan-aside">
        <div class="zan-brand">
            <a href="index.html">zan-admin后台管理系统</a>
        </div>
        <ul class="zan-sidebar">
            <li>
                <a href="index.html">
                    <span class="glyphicon glyphicon-home" aria-hidden="true"></span>后台首页
                </a>
            </li>
            <li>
                <a href="fonticon.html">
                    <span class="glyphicon glyphicon-text-size" aria-hidden="true"></span>字体图标
                </a>
            </li>
            <li class="haschildren">
                <a href="#">
                    <span class="glyphicon glyphicon-calendar" aria-hidden="true"></span>日期选择器
                </a>
                <ul class="zan-submenu">
                    <li><a href="plug_flatpickr.html">flatpickr</a></li>
                    <li><a href="plug_datetimepicker.html">datetimepicker</a></li>
                </ul>
            </li>
            <li class="haschildren">
                <a href="#">
                    <span class="glyphicon glyphicon-upload" aria-hidden="true"></span>文件上传
                </a>
                <ul class="zan-submenu">
                    <li><a href="plug_fileupload.html">fileupload</a></li>
                    <li><a href="plug_webuploader.html">webuploader</a></li>
                </ul>
            </li>
            <li class="haschildren">
                <a href="#">
                    <span class="glyphicon glyphicon-stats" aria-hidden="true"></span>图表插件
                </a>
                <ul class="zan-submenu">
                    <li><a href="plug_chart.html">chart</a></li>
                    <li><a href="plug_echarts.html">echarts</a></li>
                </ul>
            </li>

            <li class="haschildren">
                <a href="#">
                    <span class="glyphicon glyphicon-list-alt" aria-hidden="true"></span>富文本
                </a>
                <ul class="zan-submenu">
                    <li><a href="plug_tinymce.html">tinymce</a></li>
                    <li><a href="plug_editor.md.html">editor.md</a></li>
                    <li><a href="plug_ueditor.md.html">ueditor</a></li>
                </ul>
            </li>
            <li class="haschildren">
                <a href="#">
                    <span class="glyphicon glyphicon-saved" aria-hidden="true"></span>表单验证
                </a>
                <ul class="zan-submenu">
                    <li><a href="plug_formvalidation.html">formvalidation</a></li>
                    <li><a href="plug_jquery.validation.html">jquery.validation</a></li>
                </ul>
            </li>
            <li class="haschildren open">
                <a href="#">
                    <span class="glyphicon glyphicon-briefcase" aria-hidden="true"></span>其它插件
                </a>
                <ul class="zan-submenu">
                    <li><a href="plug_sweetalert.html">sweetalert</a></li>
                    <li><a href="plug_notify.html">notify</a></li>
                    <li><a href="plug_timeline.html">timeline</a></li>
                    <li><a href="plug_clipboard.html">clipboard</a></li>
                    <li><a href="plug_croppie.html">croppie</a></li>
                    <li><a href="plug_lightbox.html">lightbox</a></li>
                    <li><a href="plug_touchslider.html">touchslider</a></li>
                    <li><a href="plug_rocket.html">rocket</a></li>
                </ul>
            </li>
            <li class="haschildren">
                <a href="#">
                    <span class="glyphicon glyphicon-file" aria-hidden="true"></span>示例页面
                </a>
                <ul class="zan-submenu">
                    <li><a href="page_login.html" target="_blank">登录页面</a></li>
                    <li><a href="page_curd.html">CURD页面</a></li>
                    <li><a href="page_password.html">修改密码</a></li>
                    <li><a href="page_error.html" target="_blank">错误页面</a></li>
                </ul>
            </li>
        </ul>
    </aside>
    <!-- 面包屑导航 -->
    <div class="zan-breadcrumb">
        <ol class="breadcrumb">
            <li><a href="#">Home</a></li>
            <li><a href="#">Library</a></li>
            <li class="active">Data</li>
        </ol>
    </div>

    <main class="zan-main">
        <div class="container-fluid">
            <blockquote>
                <p>更多详细内容可查阅官网</p>
                <p>官方网站:
                    <a href="https://github.com/mouse0270/bootstrap-notify">bootstrap-notify</a>
                </p>
                <footer>zan-admin</footer>
            </blockquote>
            <div class="panel panel-default zan-panel-default">
                <div class="panel-heading">基本示例</div>
                <div class="panel-body">
                    <a class="btn btn-default demo-1" href="#" role="button">完整案例</a>
                    <a class="btn btn-default demo-2" href="#" role="button">最简示例</a>
                    <a class="btn btn-default demo-3" href="#" role="button">携带标题</a>
                    <a class="btn btn-default demo-4" href="#" role="button">HTML支持</a>
                    <a class="btn btn-default demo-5" href="#" role="button">使用字体</a>
                    <a class="btn btn-default demo-6" href="#" role="button">使用图片</a>
                </div>
            </div>
            <div class="panel panel-default zan-panel-default">
                <div class="panel-heading">方向和情景</div>
                <div class="panel-body">
                    <a class="btn btn-default demo-7" href="#" role="button">success</a>
                    <a class="btn btn-default demo-8" href="#" role="button">info</a>
                    <a class="btn btn-default demo-9" href="#" role="button">warning</a>
                    <a class="btn btn-default demo-10" href="#" role="button">danger</a>
                </div>
            </div>
        </div>
    </main>

    <script src="static/js/jquery.min.js"></script>
    <script src="static/js/bootstrap.min.js"></script>
    <script src="static/js/zan-admin.min.js"></script>
    <!-- 插件依赖 -->
    <script src="lib/bootstrap-notify/bootstrap-notify.min.js"></script>
    <script>
        $('.demo-1').on('click', function () {
            $.notify({
                // options
                icon: 'glyphicon glyphicon-warning-sign',
                title: '通知:',
                message: '点击转到会员通道',
                url: 'https://www.baidu.com',
                target: '_blank'
            }, {
                // settings
                element: 'body',
                position: null,
                type: "info",
                allow_dismiss: true,
                newest_on_top: false,
                showProgressbar: false,
                placement: {
                    from: "top",
                    align: "right"
                },
                offset: 20,
                spacing: 10,
                z_index: 1040,
                delay: 5000,
                timer: 1000,
                url_target: '_blank',
                mouse_over: null,
                animate: {
                    enter: 'animated fadeInDown',
                    exit: 'animated fadeOutUp'
                },
                onShow: null,
                onShown: null,
                onClose: null,
                onClosed: null,
                icon_type: 'class',
                template: '<div data-notify="container" class="col-xs-11 col-sm-3 alert alert-{0}" role="alert">' +
                    '<button type="button" aria-hidden="true" class="close" data-notify="dismiss">x</button>' +
                    '<span data-notify="icon"></span> ' +
                    '<span data-notify="title">{1}</span> ' +
                    '<span data-notify="message">{2}</span>' +
                    '<div class="progress" data-notify="progressbar">' +
                    '<div class="progress-bar progress-bar-{0}" role="progressbar" aria-valuenow="0" aria-valuemin="0" aria-valuemax="100" style="width: 0%;"></div>' +
                    '</div>' +
                    '<a href="{3}" target="{4}" data-notify="url"></a>' +
                    '</div>'
            });
        });
    </script>
    <!-- 简单使用(太多选项也用不上) -->
    <script>
        $('.demo-2').on('click', function () {

            $.notify("Hello World");
        });

        $('.demo-3').on('click', function () {
            $.notify({
                title: "欢迎:",
                message: "找到这个后台模板是你的小幸运"
            });
        });

        $('.demo-4').on('click', function () {
            $.notify({
                title: "<strong>欢迎:</strong> ",
                message: "<front style='color:red'>中国</front>是世界上重要的经济体"
            });
        });
        $('.demo-5').on('click', function () {
            $.notify({
                icon: 'glyphicon glyphicon-star',
                message: "可以添加自己喜欢的字体图标"
            });
        });
        $('.demo-6').on('click', function () {
            $.notify({
                icon: "static/images/elephant_64.png",
                message: "php是世界上最好的语言"
            }, {
                icon_type: 'image'
            });
        });


        $('.demo-7').on('click', function () {
            $.notify({
                message: "登录成功"
            }, {
                type: 'success',
                placement: {
                    from: "top",
                    align: "center"
                },
            });
        });

        $('.demo-8').on('click', function () {
            $.notify({
                message: "我在左上角呀"
            }, {
                type: 'info',
                placement: {
                    from: "top",
                    align: "left"
                },
            });
        });

        $('.demo-9').on('click', function () {
            $.notify({
                message: "我在左下角咯"
            }, {
                type: 'warning',
                placement: {
                    from: "bottom",
                    align: "left"
                },
            });
        });

        $('.demo-10').on('click', function () {
            $.notify({
                message: "我还可以居中"
            }, {
                type: 'danger',
                placement: {
                    from: "center",
                    align: "center"
                },
            });
        });
    </script>
</body>

</html>